<template>
  <el-dialog v-model="show" title="" width="800" @close="handleClose">
    <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
      <el-form-item :prop="searchName" :label="$t('common.queryBtn')">
        <el-input v-model="state.queryForm[searchName]" placeholder="" clearable @clear="getDataList" />
      </el-form-item>

      <el-form-item>
        <el-button icon="search" type="primary" @click="queryFn">
          {{ $t('common.queryBtn') }}
        </el-button>
        <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
      :header-cell-style="tableStyle.headerCellStyle" @selection-change="selectionChangHandle"
      @sort-change="sortChangeHandle" @select="selectFn" ref="tabelREF" row-key="id">
      <el-table-column :reserve-selection="true" type="selection" width="40" />
      <el-table-column :prop="item.prop" :label="item.label" v-for="item in tableOption"
        :key="item.prop"></el-table-column>

    </el-table>
    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false">{{ $t('common.cancelButtonText') }}</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { BasicTableProps, useTable } from "/@/hooks/table";

const props = defineProps<{
  getPage: Function,  // 请求方法
  tableOption: {
    prop: string,
    label: string
  }[],   // 定义表格
  searchName: string,  // 搜索字段
  shopId: string
}>()

const emit = defineEmits(['submit', "change", "select"]);
const queryRef = ref()
const show = ref(false)
const selectObjs = ref([]) as any
const loading = ref(false)
const tabelREF = ref()
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {

  },
  pageList: props.getPage
})



//  table hook

const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  tableStyle
} = useTable(state)
const saveSelect = ref([])

const queryFn = async () => {
  saveSelect.value = selectObjs.value
  await getDataList()


}
// 清空搜索条件
const resetQuery = () => {
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  saveSelect.value = []
  getDataList()


  tabelREF.value.clearSelection()
}
const handleClose = () => {
  queryRef.value?.resetFields()
  tabelREF.value.clearSelection()
}

const selectFn = (selection, row) => {
  emit("select", selection, row)
}
const selectionChangHandle = (selection) => {
  selectObjs.value = selection
  emit("change", selection.value)
}
const onSubmit = () => {
  emit("submit", selectObjs.value.length == 0 ? saveSelect.value : selectObjs.value)
  showFn([])
}

const showFn = (arr: any[]) => {
  show.value = !show.value
  state.queryForm.shopId = props.shopId
  selectObjs.value = arr
  if (show.value) {

    queryFn()

    if (arr && arr.length > 0) {
      selectObjs.value = arr
      nextTick(() => {
        arr.forEach(el => {
          toggleRowSelectionFn(el)
        });
      })
    }
  }
}




// 回显选中

const toggleRowSelectionFn = (row) => {
  nextTick(() => {
    let obj = state.dataList.find(el => row.id == el.id)
    if (!obj) return
    tabelREF.value.toggleRowSelection(obj)
  })
}

defineExpose({
  show,
  showFn,
  selectObjs,
  toggleRowSelectionFn
})


</script>

